import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Platform,
  Image,
  Dimensions,
  ConsoleModule,
  Modal,
  TextInput,
} from '@hippy/react';
import Utils from '../../utils';
import IconKefu from '../../assets/kefu.png'
import IconSousuo from '../../assets/search.png'
import IconMsg from '../../assets/msg.png'

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#4377dd",
  },
  bgHeader: {
    height: 44,
    flexDirection: 'row',
    alignItems: 'center',
  },
  kefu: {
    marginLeft: 15,
    width: 44,
    height: 44,
  },
  kefuImg: {
    marginLeft: 12,
    marginTop: 12,
    width: 20,
    height: 20,
  },
  sousuo: {
    flex: 1,
    height: 34,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 8,
    marginRight: 8,
    borderRadius: 17,
    borderWidth: 1,
    borderColor: '#bfbfbf',
  },
  sousuoImg: {
    marginLeft: 15,
    width: 16,
    height: 16,
  },
  sousuoText: {
    marginLeft: 10,
    marginRight: 15,
    color: '#bfbfbf'
  },
  msg: {
    marginRight: 15,
    width: 44,
    height: 44,
  },
  msgImg: {
    marginLeft: 12,
    marginTop: 12,
    width: 20,
    height: 20,
  },
});

export default class HomeHeader extends Component {
  constructor(props) {
    super(props);

  }

  _kefuDidTapped = () => {
    ConsoleModule.log('~~~~~~~~~~~~~~~~~ 点击了客服按钮 ~~~~~~~~~~~~~~~~~');
  };

  _msgDidTapped = () => {
    ConsoleModule.log('~~~~~~~~~~~~~~~~~ 点击了消息按钮 ~~~~~~~~~~~~~~~~~', Dimensions.get('screen').width, Dimensions.get('screen').height);
  };


  render() {
    return (
      <View style={[styles.container, { height: Dimensions.get('screen').statusBarHeight + 44}]}>
        <View
          style={{ height: Dimensions.get('screen').statusBarHeight }}
        />
        <View style={styles.bgHeader}>
          <View style={styles.kefu} onClick={this._kefuDidTapped}>
            <Image
              style={styles.kefuImg}
              source={{ uri: IconKefu }}
            />
          </View>
          <View style={styles.sousuo}>
            <Image
              style={styles.sousuoImg}
              source={{ uri: IconSousuo }}
            />
            <Text style={styles.sousuoText}>搜索"转账"功能</Text>
          </View>
          <View style={styles.msg} onClick={this._msgDidTapped}>
            <Image
              style={styles.msgImg}
              source={{ uri: IconMsg }}
            />
          </View>
        </View>
      </View>
    );
  }
}
